$(function(){ 
	window.StudentProfileEditView = _PageView.extend({ 
		el : '#base .body',
		selectedAddress : null,
		selectedContact : null,
		initialize : function() {
			this.template = _.template($('#student-profile-template-edit').html());
			this.editAddressTemplate = _.template($('#address-template-edit').html());
			//this.editContactTemplate = _.template($('#contact-template-edit').html());
			_.bindAll(this, 'render');
            this.model.bind('change', this.render);
		},
		events: {
		  "click .save" : "save",
		  "click .updateAddress" : "editAddress",
		  "click .updateContact" : "editContact",
		  "click .addAddress" : "editAddress",
		  "click .addContact" : "editContact",
		  "click #addresses span" : "selectAddress",
		  "click #contacts span" : "selectContact"
		},

		render : function() { 
			var renderedContent = this.template(this.model.toJSON());
			actionTemplate = _.template($('#actions-template').html());  
			$(this.el).find('.page').html(renderedContent);
			
			//show the actions btn
			actions = new Actions({save:true, remove:true, close:true});
			var renderedContentActions = actionTemplate(actions.toJSON());
			$(this.el).find('.actions').html(renderedContentActions);
			 
			return this;
		},
		onClose: function(){
			//this.model.unbind("change", this.render);
		},
		
		save: function(){},
		
		selectAddress: function(e){ 
			_.each(this.model.get('person').addresses, function(a) {
				a.set({selected:false});
			});
			var addressId=$(e.target).find('input').val();
			this.model.get('person').addresses.get(addressId).set({selected:true});
			$('#addresses span').removeClass('selected');
			$(e.target).addClass('selected');
		},
		editAddress: function() {
			this.selectedAddress = null
			_.each(this.model.addresses, function(address) {
				if (address.selected==true){
					this.selectedAddress = address;
				}
			});
			// if nothing is selected, add a new object
			if (this.selectedAddress == null){
				this.selectedAddress = new Address();
			}
			
			// Let's get our dialog template ready and also save the model for later use:
			var dialogWindow = this.editAddressTemplate(this.selectedAddress.toJSON());
			var modelHolder = this.model;
		   
			// Use jQuery UI to pop up the window and set some options and buttons:
			$(dialogWindow)
				.appendTo('body')
			.dialog({
					modal: true,
					width: 525,
					height: 400,
					buttons: {
						OK: function(){ 
							var $dialog = $(this);
							// Serialize the object so we can set it into the model and save it up to the serveR:
							var newObject = $(this).children('form').serializeObject();
							
							// Our save function! Backbone will automatically save the object, update the model,
							// re-render the view and send the data up to the server for persistence. We also
							// set a callback function so we can show the view, if it's hidden and close the dialog
							// after the ajax returns from the server:
							modelHolder.save(newObject, {
								success: function(){
									modelHolder.view.show();
								   $dialog.dialog('close');
								}
						   });
						},
						Cancel: function(){
							// Canceling the dialog/edit window. If the record was new, we want to remove the view:
							/*if (modelHolder.view.isHidden()){
								modelHolder.destroy({success: function(model, response) {
								   model.view.remove();     
								}});
							}*/
							
							// Close the dialog:
							$(this).dialog('close');
					   }
					},
					close: function(event, ui) {
						// When we close the dialog, either through 'OK' or 'Cancel', we want to remove the dialog
					   // code from the DOM:
					   $(this).remove();
					}
				});
               
                return false;
           },
			selectContact: function(e){
				var a=2;
			},
			editContact: function() {
			}


	});
});
